<template>
	<template v-if="type === 'SEPERATOR'"
		><span class="app-context-menu__seperator">|</span></template
	>
	<AppButton
		@click="handleClick"
		:loading="loading"
		:disabled="item.disabled"
		class="context-menu-item__btn"
	>
		<AppIconText
			:imgPath="item.showIcon ? item.imagePath : ''"
			:iconClass="item.showIcon ? item.cssClass : ''"
			:text="
				item.showCaption
					? item.captionLanResTag
						? $t(item.captionLanResTag, item.caption)
						: item.caption
					: ''
			"
			:tooltip="
				item.tooltipLanResTag
					? $t(item.tooltipLanResTag, item.tooltip)
					: item.tooltip
			"
		></AppIconText>
	</AppButton>
</template>

<script setup lang="ts">
import { contextMenuItemProps } from '../context-menu';
import { AppButton } from '@components/common/button';
import { AppIconText } from '@components/common/icon-text';
const props = defineProps(contextMenuItemProps);
const emit = defineEmits(['itemClick']);
const type = computed(() => {
	return props.item.itemType;
});

const handleClick = (event: MouseEvent) => {
	emit('itemClick', props.item, event);
};
</script>
